<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>{{config.app.name}}</title>
		
		<link rel="stylesheet" href="/www/css/bootstrap.min.css">
		<link rel="stylesheet" href="/www/css/bootstrap-editor.min.css">
		<link rel="stylesheet" href="/www/css/jquery.datetimepicker.css">
		<link rel="stylesheet" href="/www/css/jquery.gantt.min.css">
		<link rel="stylesheet" href="/www/css/jstree.min.css">
		<link rel="stylesheet" href="/www/css/font-awesome.min.css">
		<link rel="stylesheet" href="/www/css/site.css">

		<script src="/www/js/jquery.min.js"></script>
		<script src="/www/js/jquery.datetimepicker.min.js"></script>
		<script src="/www/js/jquery.gantt.min.js"></script>
		<script src="/www/js/jstree.min.js"></script>
		<script src="/www/js/bootstrap.min.js"></script>
		<script src="/www/js/bootstrap-editor.min.js"></script>
	</head>
	<body style="font-family: 'Microsoft YaHei', Verdana, sans-serif, SimSun;">
		<nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-dark p-0">
			<a class="navbar-brand" href="#" style="font-size: 1em; color: #10af88;">
				<img src="/www/favicon.ico" width="24px" height="24px" style="margin: -6px 8px 0 8px;">
				{{config.app.name}}
			</a>

			{% if session.uid then %}
			<ul class="navbar-nav ml-auto">
				<li class="nav-item">
					<a class="nav-link" href="#" onclick="return openProfile();">
						<img id="navbar-avatar" src="{{session.avatar}}" width="20px" height="20px" class="rounded-circle" style="margin-top: -2px"> <span id="navbar-name">{{session.name}}</span>
					</a>
				</li>
			</ul>
			{% end %}
		</nav>

		<div id="profile-pane" class="profile-pane shadow invisible">
		</div>

		{*view*}
	</body>

	<script>
	function showError(container, title, message) {
		var elem = $(container).get(0);
		elem.innerHTML = '<div class="alert alert-danger alert-dismissible fade show" role="alert">'
			+ '<strong>' + title + '</strong>：&nbsp;'
			+ message
			+ '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
			+ '</div>';
	}

	function openProfile() {
		$.post('/user/profile/', function(ret) {
			$('#profile-pane').empty();
			$('#profile-pane').append($(ret));
			$('#profile-pane').removeClass('invisible');
			$('#profile-pane').addClass('visible');
		}, 'html');
	}

	function closeProfile() {
		$('#profile-pane').empty();
		$('#profile-pane').removeClass('visible');
		$('#profile-pane').addClass('invisible');
	}
	</script>
</html>